// @import '~@/theme/mixins/';
@import '~@/theme/index.less';

@switchPrefixCls: je-switch;

.@{switchPrefixCls} {
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
	position: relative; 
	cursor: pointer;
	align-self: center;

	.checkbox {
		width: 70 * @hd;
		height: 31 * @hd;
		border-radius: 31 * @hd;
		box-sizing: border-box;
		background: #e5e5e5;
		z-index: 0;
		margin: 0;
		padding: 0;
		appearance: none;
		border: 0;
		cursor: pointer;
		position: relative;
		transition: all 300ms;

		&:before {
			content: ' ';
			position: absolute;
			left: 1.5 * @hd;
			top: 1.5 * @hd;
			width: 68 * @hd;
			height: 28 * @hd;
			border-radius: 28 * @hd;
			box-sizing: border-box;
			background: @fill-base;
			z-index: 1;
			transition: all 200ms;
			transform: scale(1);
		}

		&:after {
			content: ' ';
			height: 28 * @hd;
			width: 28 * @hd;
			border-radius: 28 * @hd;
			background: @fill-base;
			position: absolute;
			z-index: 2;
			left: 1.1 * @hd;
			top: 0.5 * @hd;
			transform: translateX(0);
			transition: all 200ms;
			box-shadow: 2 * @hd 2 * @hd 4 * @hd rgba(0, 0, 0, 0.21);
		}

		&.checkbox-disabled {
			z-index: 3;
		}
	}

	input[type="checkbox"] {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
		border: 0 none;
		appearance: none;

		&:checked {
			& + .checkbox {
				background: @switch-fill;

				&:before {
					transform: scale(0);
				}

				&:after {
					transform: translateX(40 * @hd);
				}
			}
		}

		&:disabled {
			& + .checkbox {
				opacity: @opacity-disabled;
			}
		}
	}

	&&-android {
		.checkbox {
			width: 72 * @hd;
			height: 23 * @hd;
			border-radius: @radius-sm;
			background: #a7aaa6;

			&:before {
				display: none;
			}

			&:after {
				width: 35 * @hd;
				height: 21 * @hd;
				border-radius: @radius-xs;
				box-shadow: none;
				left: 1PX;
				top: 1PX;
			}
		}

		input[type="checkbox"] {
			&:checked {
				& + .checkbox {
					background: @switch-fill-android;

					&:before {
						transform: scale(0);
					}

					&:after {
						transform: translateX(40 * @hd);
					}
				}
			}
		}
	}
}
